<template>
    <el-dialog :title="isEdit ? '编辑信息' : '添加信息'" :visible="visible" append-to-body :destroy-on-close="true"
        @close="close">
        <el-form size="small" :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
            <el-form-item label="食品安全信息" prop="qs_info">
                <el-input v-model="ruleForm.qs_info" placeholder="请输入食品安全信息" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="食品安全凭证" prop="qs_food">
                <upload-single-img :imgUrl="ruleForm.qs_food" @removeImg="removeImg" @handleSuccess="handleSuccess"
                    ref="upload"></upload-single-img>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="onSubmit('ruleForm')" :disabled="isDisabled"
                :loading="isLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { upload_food_cert } from "@/api/order";
import UploadSingleImg from "@/components/uploadSingleImg.vue";
export default {
    components: {
        UploadSingleImg,
    },
    name: "addCate",
    props: {},
    data() {
        return {
            visible: false,
            isDisabled: false,
            isLoading: false,
            ruleForm: {
                order_id: '',
                order_goods_id: '',
                qs_info: '',
                qs_food: ''
            },
            parent_id: '',
            cateList: [],
            rules: {
                qs_info: [
                    {
                        required: true,
                        message: "请输入食品安全信息",
                        trigger: "blur",
                    },
                ],
                qs_food: [
                    {
                        required: true,
                        message: "请上传食品安全凭证",
                        trigger: "blur",
                    },
                ],
            },
            isEdit: false, // 是否编辑食品安全信息
        };
    },
    created() { },
    methods: {
        add() {
            this.visible = true;
        },
        clear() {
            this.ruleForm = {
                order_id: '',
                order_goods_id: '',
                qs_info: '',
                qs_food: ''
            };
        },
        async onSubmit(formName) {
            this.isDisabled = true;
            this.isLoading = true;
            let res = await this.$getCsrToken();
            if (res.code == 0) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        upload_food_cert(this.ruleForm).then((res) => {
                            if (res.code == 0) {
                                this.$message({
                                    message: res.msg,
                                    type: "success",
                                });
                                this.$emit("reload", this.ruleForm);
                                this.clear();
                                this.close();
                                this.isDisabled = false;
                                this.isLoading = false;
                            } else {
                                this.isDisabled = false;
                                this.isLoading = false;
                            }
                        });
                    } else {
                        this.isDisabled = false;
                        this.isLoading = false;
                        if (localStorage.getItem('X-Csrf-Token')) {
                            localStorage.setItem("X-Csrf-Token", '');
                        }
                        return false;
                    }
                });
            }
        },
        close() {
            this.visible = false;
        },
        removeImg() {
            this.ruleForm.qs_food = ''
        },
        handleSuccess(e) {
            this.ruleForm.qs_food = e;
        },
    },
};
</script>

<style scoped>
.tip {
    font-size: 12px;
    color: red;
}
</style>